<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <title>Demo Application</title>
    <link rel="stylesheet" href="/static/main.css" />
    <link rel="stylesheet" href="/static/button.css" />
    <script src="/static/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        .loginForm, .action, #response { margin:15px; padding:15px; border-radius: 5px; }
        .loginForm, #response { border: 1px solid #ccc; width: 870px; }
        input.loginForm { margin-left: 10px; } 
        #labelNickname { padding-left:15px; }
        .info { color:#666; font-size: 12px; line-height:16px; }
        .error { color:#cc2222; font-size: 12px; line-height:16px; }
    </style>
</head>

<body>
    <div class="center">
	    <div class="loginForm">
	       <div>
		        <span>Account: </span>
		        <input id="txtMobile" class="text" placeholder="Your Mobile" />
		        <span>Password: </span>
		        <input id="txtPassword" class="text" placeholder="Your Password" />
                <a id="btnLogin" href="#" class="button button-action button-normal">Login</a>
	            <a id="btnRegister" href="#" class="button button-action button-normal">Register</a>
	        </div>
	        <div style="margin-top:8px;">
	           <span class="info">Current User: </span>
	           <span id="labelLoginError" class="error"></span>
	           <span id="labelUserId" class="info"></span>
	           <span id="labelNickname" class="info"></span>
	        </div>
	    </div>
	    <div class="action">
	        <a id="btnItemList" href="#" class="button button-action button-normal">Item List</a>
	        <a id="btnCreateOrder" href="#" class="button button-caution button-normal">Create Order(Login Required)</a>
	        <a id="btnFullTest" href="#" class="button button-action button-normal">Run a Full TestCase</a>
	    </div>
        <pre id="response" class="info"></pre>
	</div>
	
    <script type="text/javascript">
    $(document).ready(function() {
        $('#btnRegister').click(function() {
            $.post({ url: "/shop/register", data: { mobile: $('#txtMobile').val() , password: $('#txtPassword').val() }, dataType: 'text', success: function(data){
                var json = toJSON(data);
                if(json==null) {
                	$('#labelLoginError').text(data==null ? '' : data);
                	$('#labelUserId').text('');
                    $('#labelNickname').text('');
                } else {
                	$('#labelLoginError').text('');
	               	$('#labelUserId').text(json.userId);
	                $('#labelNickname').text(json.nickname);
                }
            }});
        });
        $('#btnLogin').click(function() {
            $.post({ url: "/shop/login", data: { mobile: $('#txtMobile').val() , password: $('#txtPassword').val() }, dataType: 'text', success: function(data){
                var json = toJSON(data);
                if(json==null) {
                    $('#labelLoginError').text(data==null ? '' : data);
                    $('#labelUserId').text('');
                    $('#labelNickname').text('');
                } else {
                    $('#labelLoginError').text('');
                    $('#labelUserId').text(json.userId);
                    $('#labelNickname').text(json.nickname);
                }
            }});
        });
        $('#btnItemList').click(function() {
            $.get({ url: "/shop/item/list", dataType:'text', success: function(data){
            	$('#response').html(stringify(data));
            }});
        });
        $('#btnCreateOrder').click(function() {
            $.post({ url: "/shop/order/create", dataType:'text', success: function(data){
            	$('#response').html(stringify(data));
            }});
        });
        $('#btnFullTest').click(function() {
            $.get({ url: "/shop/full-test", dataType:'text', success: function(data){
            	$('#response').html(stringify(data));
            }});
        });
        function toJSON(data) {
        	if(data==null || data=='') return null;
        	try {
        		return $.parseJSON(data);
        	} catch {
        		return null;
        	}
        }
        function stringify(data) {
        	var json = toJSON(data);
        	if(json==null) return data;
        	return JSON.stringify(json, null, '  ');
        }
    });
    </script>
</body>
</html>